import { Cards, Card, Tabs } from 'nextra/components'
import BadgeGroup, { UniverTypes } from '@/components/BadgeGroup'

# 快速开始

<BadgeGroup values={[UniverTypes.SHEET, UniverTypes.DOC]} value={UniverTypes.DOC} />

如果你想尽快开始体验 Univer，那么你来对地方了！这个页面将带你在几分钟内从零搭建一个可以运行的 Univer 应用。

## 在线体验

你可以在线体验 Univer，无需安装任何东西。只需点击下面的链接，即可立即开始使用 Univer。

<Cards>
  <Card
    icon="📝"
    title={<span className="">Univer Doc<sup>Beta</sup></span>}
    href="https://stackblitz.com/~/github.com/awesome-univer/docs-vite-demo"
  />
</Cards>

## 从模板创建

如果你想在本地搭建 Univer 应用，可以使用以下命令从模板创建一个新的 Univer 应用。

<Tabs items={['pnpm', 'npm']}>
  <Tabs.Tab label="pnpm">
    ```shell
    pnpm dlx degit dream-num/univer-doc-start-kit [your-app-name]
    ```
  </Tabs.Tab>
  <Tabs.Tab label="npm">
    ```shell
    npx degit dream-num/univer-doc-start-kit [your-app-name]
    ```
  </Tabs.Tab>
</Tabs>

至此，你已经成功创建了属于你的第一个 Univer 项目，并且体验了 Univer 的一些功能。

{/* ## 下一步

恭喜你！你已经迈出了第一步，开始了解 Univer。接下来，你可以继续深入学习 Univer，这里有一些建议：

- **🔰 安装和引入**：如果你想学习如何从头开始手动创建一个 Univer 项目，请查看[安装和引入](/guides/doc/getting-started/installation)章节。它将一步步引导你完成整个过程。
- **🏗️ 进阶使用**：如果你想进一步提升你的 Univer 技能，可以查看[进阶使用](/guides/doc/advanced/univer-plugins)章节。它涵盖了更多高级主题和技巧。
- **📚 教程**：如果你想了解一些实际的例子和真实的用例，可以查看[教程](/zh-cn/guides/tutorials/csv-import-plugin)章节，里面有一些实用的教程，可以帮助你学习如何使用 Univer 构建各种应用和功能。
- **🧱 概念与架构**：如果你想深入了解 Univer 的内部工作原理，可以查看 [概念与架构](/zh-cn/guides/concepts-and-architecture/architecture/) 章节，它提供了 Univer 的架构、核心概念和设计原则的全面概述。
- **🪄 扩展 Univer**：希望扩展和自定义 Univer 以满足你的特定需求？[扩展 Univer](/zh-cn/guides/customization) 章节是你学习如何创建自定义插件、主题和扩展的首选。
- **🎢 在线演示**： 别忘了探索[在线演示](/playground)页面，在那里你可以尝试各种 Univer 演示，看到这个库的实际运行。

无论你选择哪条道路，Univer 都会在你的每一步旅程中支持你。祝你开发愉快！ */}
